<script setup lang="ts">
import { ref, reactive } from "vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import { ranking } from "@/api";
import { ElMessage } from "element-plus";

const config = ref({
  showValue: true,
  unit: "次",
});
const data = ref([
  {
    value: 10,
    name: "商丘市",
  },
  {
    value: 8,
    name: "连云港市",
  },
  {
    value: 7,
    name: "长沙市",
  },
  {
    value: 5,
    name: "恩施土家族苗族自治州",
  },
  {
    value: 4,
    name: "海外",
  },
  {
    value: 4,
    name: "晋中市",
  },
  {
    value: 3,
    name: "通化市",
  },
  {
    value: 1,
    name: "莆田市",
  },
]);
</script>

<template>
  <div class="right_bottom">
    <CapsuleChart
      :config="config"
      style="width: 100%; height: 260px"
      :data="data"
    />
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
}
</style>
